<template>
  <div class="new-product-container SK-community-container">
    <div class="new-content-container" style="top: 88px">
      <div class="main-content">
        <h3 class="typical-name-1">
          <span class="p-name">{{ gameDetail.name }}</span>
        </h3>
        <div class="new-content-left">
          <div class="game-introduction-material common-bg">
            <div class="content">
              <img :src="gameDetail.page" style="width: 790px; height: 352px" />
            </div>
          </div>
          <div class="game-introduction">
            <h3 class="game-introduction-title">游戏介绍</h3>
            <div
              class="game-introduction-content common-bg"
              id="game-introduction-content"
              style="line-height: 24px; font-size: 14px"
            >
              <div class="dangerously_html_container undefined">
                {{ gameDetail.introduce }}
              </div>
            </div>
          </div>
          <div class="player-evaluation">
            <div class="player-evaluation-container">
              <h3 class="player-evaluation-title">
                <span>玩家评价</span>
              </h3>
              <div class="comment common-bg">
                <div class="score">
                  <div class="sonkwo_score active" data="sonkwo_articles">
                    <div class="detail_info">
                      <div class="left">
                        <span class="span_score">{{ average }}</span
                        ><span class="tip"
                          ><div>
                            <i data-id="1" class="fa fa-star orange"></i
                            ><i data-id="2" class="fa fa-star orange"></i
                            ><i data-id="3" class="fa fa-star orange"></i
                            ><i data-id="4" class="fa fa-star orange"></i
                            ><i data-id="5" class="fa fa-star grey"></i>
                          </div>
                        </span>
                        <button @click="comment">评测游戏</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="no-game-store-block" v-if="gameCommentList == null">
                暂无评价....
              </div>
              <div class="game-evaluation-list" v-else>
                <div
                  class="list-item"
                  id="scroll-block-index0"
                  v-for="(comment, index) in gameCommentList"
                  :key="comment.id"
                >
                  <div class="item-right-block">
                    <div class="brief-info_user">
                      <h1 class="author-name">
                        {{ comment.username }}&nbsp;&nbsp评分：{{
                          comment.grade
                        }}
                      </h1>
                    </div>

                    <div class="player-post-main-content" id="main-content-0">
                      <div class="content" id="content-0">
                        {{ comment.content }}
                      </div>
                    </div>

                    <div class="action-block">
                      <div class="release-time">发布于{{ comment.time }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <el-dialog title="评测游戏" :visible.sync="dialogFormVisible">
              <el-form style="width: 80%" :model="commentForm">
                <el-form-item
                  prop="content_post"
                  label="评测想法"
                  label-width="100px"
                >
                  <el-input
                    type="textarea"
                    autocomplete="off"
                    v-model="commentForm.content"
                  ></el-input>
                </el-form-item>

                <el-form-item label="（10分）">
                  <div class="block">
                    <span class="demonstration">评分</span>
                    <el-slider
                      v-model="commentForm.grade"
                      :format-tooltip="formatTooltip"
                    ></el-slider>
                  </div>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="commentGame">确 定</el-button>
              </div>
            </el-dialog>
          </div>
        </div>
        <div class="new-content-right">
          <div class="game-sale-block common-bg">
            <div class="dangerously_html_container brief-info"></div>
            <div class="tag-list">
              <a class="tag">{{ gameDetail.gametype }}</a>
            </div>
            <div class="sale-info">
              <div
                class="sale-info_block"
                v-if="gameDetail.previousmoney != gameDetail.nowmoney"
              >
                <div class="off-count">-{{ sale }}%</div>
                <div class="origin-price">￥{{ gameDetail.previousmoney }}</div>
                <div class="sale-price">￥{{ gameDetail.nowmoney }}</div>
              </div>
              <div class="sale-price" v-else>￥{{ gameDetail.nowmoney }}</div>
            </div>

            <div class="btns-block">
              <div class=" ">
                <div class="SK-button-com add-cart btn-common-css">
                  <button class="orange" @click="addWish">
                    <i class="fa fa-shopping-cart"></i>加入心愿单
                  </button>
                </div>
                <div class="SK-button-com one-click btn-common-css">
                  <button class="blue" @click="buyGame">立即购买</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { reqbuyGame, reqCommentGame, reqAddWish } from "@/api";
export default {
  name: "Detail",
  data() {
    return {
      userInfo: {
        name: "",
        money: 0,
        page: "",
        phone: "",
        sex: "",
        state: "",
        password: "",
      },
      commentForm: {
        content: "",
        grade: 0,
      },
      dialogFormVisible: false,
    };
  },
  mounted() {
    this.getUserInfo();
    this.getGameDetail();
  },
  methods: {
    getUserInfo() {
      this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
    },
    // 获取游戏详情
    async getGameDetail() {
      let gamename = this.$route.query.gamename;
      try {
        await this.$store.dispatch("getGameDetail", gamename);
      } catch (error) {
        alert(error.message);
      }
    },
    async buyGame() {
      let username = this.userInfo.name;
      let gamename = this.$route.query.gamename;
      let nowmoney = this.gameDetail.nowmoney;
      let res = await reqbuyGame({ username, gamename, nowmoney });
      if (res.code == 200) {
        this.$message.success("购买成功");
        this.userInfo = res.obj;
        localStorage.setItem("userInfo", JSON.stringify(this.userInfo));
      } else {
        alert(res.msg);
      }
    },
    // 评测游戏
    async commentGame() {
      let res = await reqCommentGame({
        gamename: this.$route.query.gamename,
        username: this.userInfo.name,
        content: this.commentForm.content,
        grade: this.commentForm.grade / 10,
      });
      if (res.code == 200) {
        this.dialogFormVisible = false;
        this.$message.success("评测成功");
        this.getGameDetail();
      } else {
        alert(res.msg);
      }
    },
    comment() {
      this.dialogFormVisible = true;
      // 每次点开都清空
      this.commentForm = { content: "", grade: "" };
    },
    // 格式化评分条
    formatTooltip(val) {
      return val / 10;
    },
    // 加入心愿单
    async addWish() {
      try {
        let username = this.userInfo.name;
        let gamename = this.$route.query.gamename;
        let res = await reqAddWish({ username, gamename });
        this.$message.success("加入成功！");
      } catch (error) {
        alert(res.msg);
      }
    },
  },
  computed: {
    ...mapState({
      gameDetail: (state) => state.game.gameDetail,
      gameCommentList: (state) => state.game.gameDetail.gameCommentUtilList,
      sale: (state) => {
        return parseInt(
          (100 *
            (state.game.gameDetail.previousmoney -
              state.game.gameDetail.nowmoney)) /
            state.game.gameDetail.previousmoney
        );
      },
      average: (state) => state.game.gameDetail.avggrade.toFixed(1) || 0,
    }),
  },
};
</script>

<style>
@import "../../assets/css/detail.css";
</style>
